<template>
  <div>
    <tabs :tabs="tabs" />
    <page-header :content="headerTitle" />
    <div class="import">
      <!--      <div class="import-wrap">-->
      <!--        <div class="import-top">-->
      <!--          <div class="label"><i class="el-icon-check" /></div>-->
      <!--          <div class="title">下载模版，填写题目、选项、正确答案</div>-->
      <!--          <el-button size="small" plain class="btn" @click="download">下载Word模版</el-button>-->
      <!--          &lt;!&ndash; <el-button size="small" plain class="btn">下载Excel模版</el-button> &ndash;&gt;-->
      <!--        </div>-->
      <!--        &lt;!&ndash;        <div class="import-top mgtop30">-->
      <!--          <div class="label">1</div>-->
      <!--          <div class="title">Excel模版说明</div>-->
      <!--        </div>-->
      <!--        <div class="import-explain">-->
      <!--          <div class="item">-->
      <!--            <i class="el-icon-warning-outline"></i>-->
      <!--            请按照模版样式填写-->
      <!--          </div>-->
      <!--          <div class="item">-->
      <!--            <i class="el-icon-warning-outline"></i>-->
      <!--            请按照模版样式填写-->
      <!--          </div>-->
      <!--          <div class="item">-->
      <!--            <i class="el-icon-warning-outline"></i>-->
      <!--            请按照模版样式填写-->
      <!--          </div>-->
      <!--          <div class="item">-->
      <!--            <i class="el-icon-warning-outline"></i>-->
      <!--            请按照模版样式填写-->
      <!--          </div>-->
      <!--        </div> &ndash;&gt;-->

      <!--        <div class="import-top mgtop30">-->
      <!--          <div class="label">2</div>-->
      <!--          <div class="title">Word模版说明</div>-->
      <!--        </div>-->
      <!--        <div class="import-explain">-->
      <!--          <div class="item">-->
      <!--            <i class="el-icon-warning-outline" />-->
      <!--            每道大题需使用5个#符合分隔-->
      <!--          </div>-->
      <!--          <div class="item">-->
      <!--            <i class="el-icon-warning-outline" />-->
      <!--            材料题中的小题开头有4个#符号标识-->
      <!--          </div>-->
      <!--          <div class="item">-->
      <!--            <i class="el-icon-warning-outline" />-->
      <!--            支持导入单选题、判断题、多选题、不定项选择题、材料题、简答题-->
      <!--          </div>-->
      <!--          <div class="item">-->
      <!--            <i class="el-icon-warning-outline" />-->
      <!--            目前仅支持docx格式的模板文件-->
      <!--          </div>-->
      <!--        </div>-->

      <!--        <div class="import-top mgtop30">-->
      <!--          <div class="label">3</div>-->
      <!--          <div class="title">上传填写好的模版</div>-->
      <!--          <el-upload-->
      <!--            action=""-->
      <!--            :http-request="fileUpload"-->
      <!--            :show-file-list="false"-->
      <!--            :limit="1"-->
      <!--            :before-upload="beforeUpload"-->
      <!--            :on-success="fileOnSuccess"-->
      <!--            accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"-->
      <!--          >-->
      <!--            <el-button size="small" type="primary">点击上传</el-button>-->
      <!--          </el-upload>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="import-wrap">
        <div class="import-top">
          <div class="label"><i class="el-icon-check" /></div>
          <div class="title">下载模版，填写题目、选项、正确答案</div>
          <el-button size="small" plain class="btn" @click="download">下载EXCEL模版</el-button>
          <!-- <el-button size="small" plain class="btn">下载Excel模版</el-button> -->
        </div>
        <!--        <div class="import-top mgtop30">
          <div class="label">1</div>
          <div class="title">Excel模版说明</div>
        </div>
        <div class="import-explain">
          <div class="item">
            <i class="el-icon-warning-outline"></i>
            请按照模版样式填写
          </div>
          <div class="item">
            <i class="el-icon-warning-outline"></i>
            请按照模版样式填写
          </div>
          <div class="item">
            <i class="el-icon-warning-outline"></i>
            请按照模版样式填写
          </div>
          <div class="item">
            <i class="el-icon-warning-outline"></i>
            请按照模版样式填写
          </div>
        </div> -->

        <div class="import-top mgtop30">
          <div class="label">2</div>
          <div class="title">EXCEL模版说明</div>
        </div>
        <div class="import-explain">
          <div class="item">
            <i class="el-icon-warning-outline" />
            每道题占用一列，材料题题干单独占一列
          </div>
          <div class="item">
            <i class="el-icon-warning-outline" />
            小题序号用6-1这种形式填写
          </div>
          <div class="item">
            <i class="el-icon-warning-outline" />
            支持导入单选题、判断题、多选题、不定项选择题、材料题、简答题
          </div>
          <div class="item">
            <i class="el-icon-warning-outline" />
            目前仅支持xlsx格式的模板文件
          </div>
          <div class="item">
            <i class="el-icon-warning-outline" />
            WPS导入图片时需要将图片转为浮动图片
          </div>
        </div>

        <div class="import-top mgtop30">
          <div class="label">3</div>
          <div class="title">上传填写好的模版</div>
          <el-upload
            action=""
            :http-request="fileUpload"
            :show-file-list="false"
            :limit="1"
            :before-upload="beforeUpload"
            :on-success="fileOnSuccess"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
      </div>
    </div>
    <el-dialog title="导入数据有误" :visible.sync="errorVisible" :close-on-click-modal="false" @closed="closeErrorBox">
      <div v-for="(error, index) in importErrors" :key="index">
        <i class="el-icon-error error" />
        <span>{{ error }}</span>
        <el-divider />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Tabs from '../tabs';
import { Loading } from 'element-ui';
import PageHeader from '@/components/page-header';

export default {
  components: {
    Tabs,
    PageHeader
  },
  inject: ['reload'],
  data() {
    return {
      tabs: [
        {
          title: '导入试题',
          uri: '/exam/question/bank/' + this.$route.params.id + '/import',
          meta: {
            permission: 'exam.question.topic.create'
          }
        }
      ],
      bankTitle: this.$localStorage.get('bank_title'),
      loadingInstance: null,
      errorVisible: false,
      importErrors: []
    };
  },
  computed: {
    headerTitle() {
      return '导入试题到：【' + this.bankTitle + '】';
    },
    bankId() {
      return this.$route.params.id;
    }
  },
  mounted() {
    this.$store.dispatch('setLoading', 0);
  },
  methods: {
    /** 自定义文件上传方法,采用分片上传 */
    fileUpload: function(params) {
      this.loadingInstance = Loading.service({
        text: '正在上传模板，请稍后...'
      });
      // 指定为临时文件
      params.is_temp = true;
      // 分片上传 每2M为一片
      this.$upload.submit(params, true, 2);
    },
    beforeUpload(file) {
      // 文件类型是否符合
      // const isDocx = file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel' || file.type == 'application/wps-office.docx';
      //
      // if (!isDocx) {
      //   this.$message.error('请上传docx格式的模板');
      //   return false;
      // }

      // 检测大小
      const isLt100M = file.size / 1024 / 1024 <= 100;
      if (!isLt100M) {
        this.$message.error('最大只能上传100M的模板');
        return false;
      }

      return true;
    },
    fileOnSuccess(response, file) {
      const attachId = file.id || response.data.id;
      this.loadingInstance.close();
      // 检查
      this.loadingInstance = Loading.service({
        text: '正在验证导入数据，请稍后...'
      });
      this.$http.post(
        '/exam/admin/question/bank/' + this.bankId + '/checkImport',
        {
          attach_id: attachId
        },
        response => {
          this.loadingInstance.close();
          const data = response.data;
          if (data.status == 1) {
            // 导入
            this.doImport(attachId);
          } else {
            this.importErrors = data.errors;
            this.errorVisible = true;
            this.disableSubmit = false;
          }
        },
        error => {
          this.$message.error(error.msg);
          this.disableSubmit = false;
        }
      );
    },
    download() {
      window.open('/template/excel/试题导入模板.xlsx', '_blank');
    },
    closeErrorBox() {
      this.reload();
    },
    // 导入
    doImport(attachId) {
      this.loadingInstance = Loading.service({
        text: '正在导入试题，请稍后...'
      });
      this.$http.post(
        '/exam/admin/question/bank/' + this.bankId + '/import',
        {
          attach_id: attachId
        },
        response => {
          this.loadingInstance.close();
          const successCount = response.data.success;
          this.$box
            .success('成功导入' + successCount + '道试题', {
              duration: 0
            })
            .then(() => {
              this.reload();
            })
            .catch(() => {});
        },
        error => {
          this.$box.error(error.msg, {
            duration: 0
          });
          this.loadingInstance.close();
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.import {
  &-wrap {
    padding: 17px 20px;

    .mgtop30 {
      margin-top: 30px;
    }

    .import-top {
      display: flex;
      align-items: center;

      .label {
        width: 30px;
        height: 30px;
        color: #fff;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        background: #5191ff;
      }

      .title {
        font-size: 15px;
        font-weight: 400;
        color: #303133;
        margin: 0 25px;
      }

      .btn {
        border-color: #5191ff;
        color: #5191ff;
      }
    }

    .import-explain {
      margin-left: 55px;

      .item {
        margin-top: 22px;
        font-size: 13px;
        font-weight: 400;
        color: #909399;
        display: flex;
        align-items: center;

        i {
          margin-right: 12px;
          font-size: 16px;
        }
      }
    }
  }
}
.error {
  color: #f56c6c;
  margin-right: 6px;
}
</style>
